<form id="wfi-urlForm" action="/create" method="POST"{% if expertMode %} _mode="expert"{% else %}{% if simpleCustomMode %} _mode="simple"{% endif %}{% endif %}>
	<input type="hidden" value="" name="datestamp" id="wfi-datestamp" />	
	<div class="form">
		<div class="line">
			<label for="wfi-smart">Specify a date or a duration</label>
			<input type="text" id="wfi-smart" autocomplete="off" />
		</div>
		<div class="line">
			<input type="checkbox" id="wfi-up" name="up" value="false" />
			<label for="wfi-up">Count up? (only works with dates in the past)</label>
		</div>
		<div class="line">
			<label for="wfi-title">Enter an optional title</label>
			<input type="text" id="wfi-title" name="title" autocomplete="off" />
		</div>
		<div class="line">
			{% if expertMode or simpleCustomMode %}
				{% if simpleCustomMode %}
				<div style="display:none;">
				{% endif %}
				<label for="wfi-customTheme">HTML of your theme</label>
				<textarea name="customTheme" id="wfi-customTheme" rows="20"><h1></h1><h2></h2></textarea>
				{% if simpleCustomMode %}
				</div>
				<div class="line">
					<label for="wfi-simpleHtmlCreator-bkgColor">Background color (enter either a color name, or an hex value prefixed with #)</label>
					<input type="text" id="wfi-simpleHtmlCreator-bkgColor" />
				</div>
				<div class="line">
					<label for="wfi-simpleHtmlCreator-bkgImage">Background image (enter the URL to an image)</label>
					<input type="text" id="wfi-simpleHtmlCreator-bkgImage" />
				</div>
				<div class="line">
					<label for="wfi-simpleHtmlCreator-bkgRepeat">Background repeat</label>
					<select id="wfi-simpleHtmlCreator-bkgRepeat">
						<option value="no-repeat">do not repeat</option>
						<option value="repeat-x">repeat on the x axis</option>
						<option value="repeat-y">repeat on the y axis</option>
						<option value="repeat">repeat on the x and y axis</option>
					</select>
				</div>
				<div class="line">
					<label for="wfi-simpleHtmlCreator-bkgPosition">Background position</label>
					<select id="wfi-simpleHtmlCreator-bkgPosition">
						<option value="top left">top left</option>
						<option value="top right">top right</option>
						<option value="bottom left">bottom left</option>
						<option value="bottom right">bottom right</option>
						<option value="center center">center center</option>
						<option value="center left">center left</option>
						<option value="center right">center right</option>
						<option value="top center">top center</option>
						<option value="bottom center">bottom center</option>
					</select>
				</div>
				<div class="line">
					<label for="wfi-simpleHtmlCreator-font">Font family</label>
					<select id="wfi-simpleHtmlCreator-font">
						<option value="arial">Arial</option>
						<option value="verdana">Verdana</option>
						<option value="times">Times New Roman</option>
					</select>
				</div>
				<div class="line">
					<label for="wfi-simpleHtmlCreator-counterColor">Counter text color (enter either a color name, or an hex value prefixed with #)</label>
					<input type="text" id="wfi-simpleHtmlCreator-counterColor" />
				</div>
				<div class="line">
					<label for="wfi-simpleHtmlCreator-counterSize">Counter text size (in pixels)</label>
					<input type="text" id="wfi-simpleHtmlCreator-counterSize" />
				</div>
				<div class="line">
					<label for="wfi-simpleHtmlCreator-titleColor">Title text color (enter either a color name, or an hex value)</label>
					<input type="text" id="wfi-simpleHtmlCreator-titleColor" />
				</div>
				<div class="line">
					<label for="wfi-simpleHtmlCreator-titleSize">Title text size (in pixels)</label>
					<input type="text" id="wfi-simpleHtmlCreator-titleSize" />
				</div>
				<div class="line">
					<label for="wfi-simpleHtmlCreator-position">Counter and title position</label>
					<select id="wfi-simpleHtmlCreator-position">
						<option value="top:0;left:0;">top left corner</option>
						<option value="top:0;right:0;">top right corner</option>
						<option value="bottom:0;left:0;">bottom left corner</option>
						<option value="bottom:0;right:0;">bottom right corner</option>
					</select>
				</div>
				{% endif %}
			{% else %}
				<label for="wfi-theme">Select a theme</label>
				<select id="wfi-theme" name="theme">
					{% for t in listOfThemes %}
						<option value="{{ t }}">{{ t }}</option>
					{% endfor %}
				</select>
				<a href="/simple">Or create your own theme!</a> (<span style="cursor:help;" title="This is a beta version only, there will be bugs, and the interface and functionalities may change in the near future">beta</span>)
			{% endif %}
		</div>
		{% if not expertMode and not simpleCustomMode %}
		<div class="line">
			<label for="wfi-music">Choose whether music should be played on your countdown page</label>
			<select id="wfi-music" name="music">
				<option value="">no</option>
				<option value="m">yes</option>
			</select>
		</div>
		{% endif %}
		<div class="line">
			{% if expertMode or simpleCustomMode %}
				<button id="wfi-previewBtn">Preview</button>
			{% endif %}
			<button>Create your countdown page</button>
			<br />
			{% if expertMode %}
				<a href="/simple">&laquo; Go back to simple custom theme creation</a>
			{% else %}{% if simpleCustomMode %}
				<a href="/expert">Switch to expert (HTML) custom theme creation</a>
			{% endif %}{% endif %}
		</div>	
	</div>
</form>